<template>
    <div id="Operation-Energy">
        <div class="map" v-if="regionName=='锡林郭勒盟'">
            <iframe
                    src="http://58.18.173.195:8082/mengenergy-app/neimeng-app/storage/energyMove-xlgl.html"
                    style="width: 100%; height: 100%;"
            ></iframe>
        </div>
        <div class="map" v-else-if="regionName!='锡林郭勒盟'">
            <iframe
                    src="http://58.18.173.195:8082/mengenergy-app/neimeng-app/storage/energyMove.html"
                    style="width: 100%; height: 100%;"
            ></iframe>
        </div>
        <div class="box1">
            <div class="tabs">
                <van-tabs type="card" @click="onClick">
                    <van-tab title="一次能源生产概况" name="1">
                        <div class="gkbox">
                            <img src="../assets/img/nyyxImg/shengchan.png" class="scimg"/>
                            <span class="gk">一次能源生产概况</span>
                            <span class="selected">
                <van-dropdown-menu>
                  <van-dropdown-item v-model="value1" :options="option1"/>
                </van-dropdown-menu>
              </span>
                        </div>
                        <div class="sczlbox">
                            <div class="leftSczl">
                                <div class="oneSczl">生产总量</div>
                                <div>
                                    <span class="total">{{totalProduction}}</span>
                                    <span class="ydbm">/亿吨标煤</span>
                                </div>
                                <div>
                                    <span>同比</span>
                                    <span class="tb">{{sameCompared}}%</span>
                                    <img v-if="this.arrow1==false" src="../assets/img/nyyxImg/green.png"/>
                                    <img v-else-if="this.arrow1==true" src="../assets/img/nyyxImg/red.png"/>
                                </div>
                                <div>
                                    <span>增速同比</span>
                                    <span class="zstb">{{speedSameCompared}}%</span>
                                    <img v-if="this.arrow2==false" src="../assets/img/nyyxImg/green.png"/>
                                    <img v-else-if="this.arrow2==true" src="../assets/img/nyyxImg/red.png"/>
                                </div>
                                <div>
                                    <span>全国占比</span>
                                    <span class="qgzb">{{countryProportion}}%</span>
                                </div>
                                <div>
                                    <span>全国排名</span>
                                    <span class="qgpm">{{countryRank}}</span>
                                </div>
                            </div>
                            <div class="rightBt" v-show="true">
                                <div id="chart1" style="width:4rem;margin-top:0.1rem;height:3.5rem"></div>
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="能源消费概况" name="2">
                        <div class="gkbox">
                            <img src="../assets/img/nyyxImg/gk.png" class="scimg"/>
                            <span class="gk">能源消费概况</span>
                            <span class="selected">
                <van-dropdown-menu>
                  <van-dropdown-item v-model="value0" :options="option0"/>
                </van-dropdown-menu>
              </span>
                        </div>
                        <div class="xfgkbox">
                            <div class="leftXf">
                                <div class="title">
                                    <span>年度能源消费总量</span>
                                    <span>排名:</span>
                                    <span>{{ totalConsumeRank }}</span>
                                </div>
                                <div class="total1">
                                    <span>{{ totalConsume }}</span>
                                    <span>亿吨标煤</span>
                                </div>
                                <div class="tbzb1">
                                    <span>同比:</span>
                                    <img src="../assets/img/nyyxImg/red.png"/>
                                    <span>{{ sameComparedT }}%</span>
                                    <span>占比:</span>
                                    <span>{{ proportion }}%</span>
                                </div>
                                <div class="xfxs">
                                    <span>能源消费弹性系数</span>
                                </div>
                                <div class="xsVal">
                                    <span>{{consumeCoefficient}}</span>
                                </div>
                                <div class="tbpm">
                                    <span>同比:</span>
                                    <img src="../assets/img/nyyxImg/green.png"/>
                                    <span>{{sameComparedC}}%</span>
                                    <span>排名:</span>
                                    <span>{{consumeCoefficientRank}}</span>
                                </div>
                            </div>
                            <div class="rightXf">
                                <div id="chartLine" style="width: 3.6rem; height: 3.2rem"></div>
                            </div>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
        <div class="box2">
            <div style="display: flex">
                <div class="qnsc">全年生产总量</div>
                <span>
          <van-dropdown-menu>
            <van-dropdown-item v-model="value2" :options="option2"/>
          </van-dropdown-menu>
        </span>
            </div>
            <div class="tabs">
                <van-tabs type="card" @click="box2Click">
                    <van-tab title="煤炭" name="1">
                        <div
                                id="mtCharts"
                                style="width: 7rem; height: 3rem; padding-top: 0.3rem"
                        ></div>
                    </van-tab>
                    <van-tab title="电力" name="2">
                        <div
                                id="dlCharts"
                                style="width: 7rem; height: 3rem; padding-top: 0.3rem"
                        ></div>
                    </van-tab>
                    <van-tab title="石油" name="3">
                        <div
                                id="syCharts"
                                style="width: 7rem; height: 3rem; padding-top: 0.3rem"
                        ></div>
                    </van-tab>
                    <van-tab title="天然气" name="4">
                        <div
                                id="tryCharts"
                                style="width: 7rem; height: 3rem; padding-top: 0.3rem"
                        ></div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
        <div class="box3">
            <div style="display: flex">
                <div class="qnxf">全年消费总量</div>
                <span>
          <van-dropdown-menu>
            <van-dropdown-item v-model="value5" :options="option5"/>
          </van-dropdown-menu>
        </span>
            </div>
            <div class="tabs">
                <van-tabs type="card" @click="box3Click">
                    <van-tab title="煤炭" name="1">
                        <div
                                id="mt2Charts"
                                style="width: 7rem; height: 3rem; padding-top: 0.3rem"
                        ></div>
                    </van-tab>
                    <van-tab title="电力" name="2">
                        <div
                                id="dl2Charts"
                                style="width: 7rem; height: 3rem; padding-top: 0.3rem"
                        ></div>
                    </van-tab>
                    <van-tab title="石油" name="3">
                        <div
                                id="sy2Charts"
                                style="width: 7rem; height: 3rem; padding-top: 0.3rem"
                        ></div>
                    </van-tab>
                    <van-tab title="天然气" name="4">
                        <div
                                id="try2Charts"
                                style="width: 7rem; height: 3rem; padding-top: 0.3rem"
                        ></div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
        <div class="box4">
            <div class="nullbox"></div>
            <div class="tabs">
                <van-tabs type="card" @click="box4Click">
                    <van-tab title="运输方式" name="1">
                        <span class="totalNmu">{{totalNum}}</span>
                        <div class="wdbm">万吨标煤</div>
                        <div id="hxCharts" style="width: 100%; height: 4rem"></div>
                    </van-tab>
                    <van-tab title="能源调入调出量" name="2">
                      <span class="selected">
                <van-dropdown-menu>
                  <van-dropdown-item v-model="value4" :options="option4"/>
                </van-dropdown-menu>
            </span>
                        <div id="drdcCharts1" style="width:100%; height: 3.7rem"></div>
                    </van-tab>
                    <van-tab title="用电交易量" name="3">

                        <div id="hxCharts1" style="width: 100%; height: 4rem"></div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
        <div class="box5">
            <div class="nullbox"></div>
            <div class="tabs">
                <van-tabs type="card" @click="box5Click">
            <span class="selected">
                <van-dropdown-menu>
                  <van-dropdown-item v-model="value3" :options="option3"/>
                </van-dropdown-menu>
            </span>
                    <van-tab title="能源价格" name="1">
                        <div id="nyPriceCharts1" style="width: 100%; height: 4rem"></div>
                    </van-tab>
                    <van-tab title="能源保供完成量" name="2">
                        <div id="nybgCharts1" style="width: 100%; height: 4rem"></div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
    </div>
</template>
<script>

    export default {
        data() {
            return {
                regionName:localStorage.getItem("regionName"),
                allCountry: [],
                countryArr: [],
                gl_p: '',
                tl_p: '',
                gd_p: '',
                dw_p: '',
                // 能源生产
                totalProduction: '',
                sameCompared: '',
                speedSameCompared: '',
                countryProportion: '',
                countryRank: '',
                efficiency: [],
                type: [],
                arrow1: true,
                arrow2: true,
                // 能源消费
                xftotal: '',
                xfpm: '',
                xftb: '',
                xfzb: '',
                consumeElasticity: '',
                consumeElasticityGrowthRate: '',
                consumeElasticityRank: '',
                // 煤炭 --全年消费
                mtXfData: [110, 230, 320, 430, 250, 160, 540, 640, 240, 540, 130, 650],
                //最高值
                maxConsumeNum: '',
                //最低值
                minConsumeNum: '',
                //极差
                differenceValue: '',
                // 电力--全年消费
                districtElectricList: [],
                differenceValueDl: '',
                maxConsumeNumDl: '',
                minConsumeNumDl: '',
                // 石油--全年消费
                districtOilList: [],
                maxConsumeNumOil: '',
                minConsumeNumOil: '',
                differenceValueOil: '',
                maxConsumeNumGas: '',
                minConsumeNumGas: '',
                differenceValueGas: '',


                // 天然气 ---全年生产

                // 用电交易量
                electricityTrading: '',

                // 运输方式
                totalNum: '',
                highway: '',
                railway: '',
                pipeline: '',
                powerGrid: '',
                transData: [],
                electricData: [],
                // 下拉框
                value0: 0,
                value1: 0,
                value2: 0,
                value4: 1,
                value3: 1,
                value5: 0,
                option2: [
                    {text: "全省", value: 0},
                    {text: "阿拉善", value: 1},
                    {text: "巴彦淖尔", value: 2},
                    {text: "鄂尔多斯", value: 3},
                    {text: "乌海", value: 4},
                    {text: "包头", value: 5},
                    {text: "呼和浩特", value: 6},
                    {text: "乌兰察布", value: 7},
                    {text: "锡林郭格勒", value: 8},
                    {text: "赤峰", value: 9},
                    {text: "通辽市", value: 10},
                    {text: "兴安盟", value: 11},
                    {text: "呼伦贝尔", value: 12},
                ],
                option1: [
                    {text: "全省", value: 0},
                    {text: "阿拉善", value: 1},
                    {text: "巴彦淖尔", value: 2},
                    {text: "鄂尔多斯", value: 3},
                    {text: "乌海", value: 4},
                    {text: "包头", value: 5},
                    {text: "呼和浩特", value: 6},
                    {text: "乌兰察布", value: 7},
                    {text: "锡林郭格勒", value: 8},
                    {text: "赤峰", value: 9},
                    {text: "通辽市", value: 10},
                    {text: "兴安盟", value: 11},
                    {text: "呼伦贝尔", value: 12},
                ],
                option0: [
                    {text: "全省", value: 0},
                    {text: "阿拉善", value: 1},
                    {text: "巴彦淖尔", value: 2},
                    {text: "鄂尔多斯", value: 3},
                    {text: "乌海", value: 4},
                    {text: "包头", value: 5},
                    {text: "呼和浩特", value: 6},
                    {text: "乌兰察布", value: 7},
                    {text: "锡林郭格勒", value: 8},
                    {text: "赤峰", value: 9},
                    {text: "通辽市", value: 10},
                    {text: "兴安盟", value: 11},
                    {text: "呼伦贝尔", value: 12},
                ],
                option3: [
                    {text: "原煤", value: 1},
                    {text: "电力", value: 2},
                    {text: "石油", value: 3},
                    {text: "天然气", value: 4},
                ],
                option4: [
                    {text: "原煤", value: 1},
                    {text: "电力", value: 2},
                    {text: "石油", value: 3},
                    {text: "天然气", value: 4},
                ],
                option5: [
                    {text: "全省", value: 0},
                    {text: "阿拉善", value: 1},
                    {text: "巴彦淖尔", value: 2},
                    {text: "鄂尔多斯", value: 3},
                    {text: "乌海", value: 4},
                    {text: "包头", value: 5},
                    {text: "呼和浩特", value: 6},
                    {text: "乌兰察布", value: 7},
                    {text: "锡林郭格勒", value: 8},
                    {text: "赤峰", value: 9},
                    {text: "通辽市", value: 10},
                    {text: "兴安盟", value: 11},
                    {text: "呼伦贝尔", value: 12},
                ],
                box1Name: '',
                box2Name: '',
                box3Name: '',
                box5Name: '',
                legendName: ['原煤价格'],
                // 全年消费
                totalConsume: '',
                totalConsumeRank: '',
                sameComparedT: '',
                proportion: '',
                consumeCoefficient: '',
                consumeCoefficientRank: '',
                sameComparedC: '',
            };
        },
        watch: {
            value1() {
                if (this.box1Name != 2) {

                    this.getScData();
                }
            },
            value0() {
                if (this.box1Name == 2) {

                    this.getXfData();

                }
            },
            value2() {
                if (this.box2Name == 2) {

                    this.getdlScData();
                } else if (this.box2Name == 3) {

                    this.getsyScData();
                } else if (this.box2Name == 4) {

                    this.gettrqScData();
                } else {
                    this.getmtScData();
                }

            },
            value5() {
                if (this.box3Name == 2) {

                    this.getdlXfData();
                } else if (this.box3Name == 3) {

                    this.getsyXfData();
                } else if (this.box3Name == 4) {

                    this.gettrqXfData();
                } else {
                    this.getmtXfData();
                }
            },
            value3() {
                if (this.box5Name != 2) {
                    this.getEnergyPriceData();

                    if (this.value3 == 1) {
                        this.legendName = ['原煤价格']

                    } else if (this.value3 == 2) {
                        this.legendName = ['电力价格']

                    } else if (this.value3 == 3) {
                        this.legendName = ['石油价格']

                    } else if (this.value3 == 4) {
                        this.legendName = ['天然气价格']

                    }

                } else {

                    this.getEnergyFinishData();
                }
            },
            value4() {
                if (this.value4) {
                    this.getTransferInAndOutData()
                }

            }

        },
        mounted() {
            this.$nextTick(function () {
                this.getScData();
                // this.getXfData();
                this.getmtScData();
                this.getmtXfData();
                this.getEnergyPriceData();
                // this.getdlScData();
                // this.getsyScData();
                // this.gettrqScData();
                this.getTypeOfShippingData();
                // this.getYdjylData();
                // this.getTransferInAndOutData();
                this.drawPlan();
                this.drawZhu();
                this.drawMt2Zhu();
                this.drawHx();
                this.drawNypriceLine();


            });

        },
        methods: {

            // 一次能源生产概况
            getScData() {
                var formData = new FormData();
                formData.append("typeId", this.value1)
                this.$axios
                    .post("mengenergy-background/energyRunning/energyYield", formData)
                    .then((res) => {

                        if (res.success == true) {
                            let data = res.data;
                            this.totalProduction = data.totalProduction;
                            this.sameCompared = data.sameCompared;
                            this.speedSameCompared = data.speedSameCompared;
                            this.countryProportion = data.countryProportion;
                            this.countryRank = data.countryRank;
                            if (this.sameCompared >= 0) {
                                this.arrow1 = true;
                            } else {
                                this.arrow1 = false;
                            }
                            if (this.speedSameCompared >= 0) {
                                this.arrow2 = true;
                            } else {
                                this.arrow2 = false;
                            }
                            this.type = data.oilGasProportion;
                            this.drawPlan();

                        }
                    });
            },
            // 能源消费概况
            getXfData() {
                this.$axios
                    .post("mengenergy-background/energyrun/energyconsume", JSON.stringify({regionId: this.value0}))
                    .then((res) => {
                        if (res.success == true) {
                            // console.log(res.data,'---9999')
                            let data = res.data;
                            let tableData = data.tableData;
                            this.totalConsume = data.totalConsume;
                            this.totalConsumeRank = data.totalConsumeRank;
                            this.sameComparedT = data.sameComparedT;
                            this.proportion = data.proportion;
                            this.consumeCoefficientRank = data.consumeCoefficientRank;
                            this.sameComparedC = data.sameComparedC;
                            this.consumeCoefficient = data.consumeCoefficient;
                            var areaArr = [];
                            var countryArr = [];
                            for (let i = 0; i < tableData.length; i++) {
                                let area = parseInt(tableData[i]['area']);
                                let country = parseInt(tableData[i]['country']);
                                areaArr.push(area);
                                countryArr.push(country);
                            }
                            this.allCountry = areaArr;
                            this.allArea = countryArr

                            this.drawLine();

                        }
                    });
            },

            // 运输方式
            getTypeOfShippingData() {
                var formData = new FormData();
                formData.append("typeId", 0)
                this.$axios
                    .post("mengenergy-background/energyRunning/transmissionWay", formData)
                    .then((res) => {

                        if (res.success == true) {
                            let data = res.data.transmissionWay;
                            this.totalNum = res.data.total;
                            var arr = [];
                            for (let i = 0; i < data.length; i++) {
                                arr.push({
                                    "name": data[i].name + "\n" + data[i].percent + '%  ' + data[i].value + "万吨标煤",
                                    "value": data[i].value
                                })
                            }
                            this.transData = arr;
                            this.drawHx();
                        }
                    });
            },
            // 能源调入调出量
            getTransferInAndOutData() {
                var formData = new FormData();
                formData.append("type", this.value4)
                formData.append("typeId", 0)

                this.$axios
                    .post("mengenergy-background/energyRunning/energyInOutVolume", formData)
                    .then((res) => {
                        if (res.success == true) {
                            let data = res.data.tableDate;

                            this.drawDrdcZhu(data.xAxisData, data.yAxisData_1, data.yAxisData_2);

                        }
                    });
            },
            // 用电交易量
            getYdjylData() {
                var formData = new FormData();
                formData.append("typeId", 0)
                this.$axios
                    .post("mengenergy-background/energyRunning/electricTradeKWH", formData)
                    .then((res) => {

                        if (res.success == true) {
                            var data = res.data.type;
                            var arr = []
                            for (let i = 0; i < data.length; i++) {
                                arr.push({
                                    "name": data[i].name + "\n" + data[i].percent + '%  ' + data[i].value + "万千瓦时",
                                    "value": data[i].value
                                })
                            }
                            this.electricData = arr
                            this.electricityTrading = res.data.total
                            this.drawHx1()
                        }
                    });
            },
            // 能源价格
            getEnergyPriceData() {
                var formData = new FormData();
                formData.append("type", this.value3)
                this.$axios
                    .post("mengenergy-background/energyRunning/energyPrice", formData)
                    .then((res) => {
                        if (res.success == true) {
                            let data = res.data.tableDate;


                            this.drawNypriceLine(data.xAxisData, data.yAxisData)
                        }
                    });
            },
            // 能源保供完成量
            getEnergyFinishData() {
                var formData = new FormData();
                formData.append("type", this.value3)
                formData.append("typeId", 0)
                this.$axios
                    .post("mengenergy-background/energyRunning/resourcesSupplyMonth", formData)
                    .then((res) => {

                        if (res.success == true) {
                            let data = res.data.tableDate;

                            this.drawNybgZhu(data.xAxisData, data.yAxisData_1, data.yAxisData_2);
                        }
                    });
            },


            // 获取全年生产--煤炭数据
            getmtScData() {
                var formData = new FormData();
                formData.append("typeId", this.value2)
                this.$axios
                    .post("mengenergy-background/energyRunning/coalProduction", formData)
                    .then((res) => {

                        if (res.success == true) {
                            let data = res.data.tableDate;
                            this.drawZhu(data.xAxisData, data.yAxisData);

                        }
                    });
            },
            // 获取全年生产--电力数据
            getdlScData() {
                var formData = new FormData();
                formData.append("typeId", this.value2)
                this.$axios
                    .post("mengenergy-background/energyRunning/electricProduction", formData)
                    .then((res) => {

                        if (res.success == true) {
                            let data = res.data.tableDate;

                            this.drawDlLine(data.xAxisData, data.yAxisData);

                        }
                    });
            },
            // 获取全年生产--原油数据
            getsyScData() {
                var formData = new FormData();
                formData.append("typeId", this.value2)
                this.$axios
                    .post("mengenergy-background/energyRunning/oilProduction", formData)
                    .then((res) => {
                        if (res.success == true) {
                            let data = res.data.tableDate;

                            this.drawSyZhu(data.xAxisData, data.yAxisData);

                        }
                    });
            },
            // 获取全年生产--天然气数据
            gettrqScData() {
                var formData = new FormData();
                formData.append("typeId", this.value2)
                this.$axios
                    .post("mengenergy-background/energyRunning/gasProduction", formData)
                    .then((res) => {

                        if (res.success == true) {
                            let data = res.data.tableDate;

                            this.drawTrqLine(data.xAxisData, data.yAxisData);

                        }
                    });
            },


            // 获取全年消费总量--煤炭数据
            getmtXfData() {
                var formData = new FormData();
                formData.append("typeId", this.value5)
                this.$axios
                    .post("mengenergy-background/energyRunning/coalConsume", formData)
                    .then((res) => {

                        if (res.success == true) {
                            let data = res.data.tableDate;

                            this.drawMt2Zhu(data.xAxisData, data.yAxisData);

                        }
                    });
            },
            // 获取全年消费总量--电力数据
            getdlXfData() {
                var formData = new FormData();
                formData.append("typeId", this.value5)
                this.$axios
                    .post("mengenergy-background/energyRunning/electricConsume", formData)
                    .then((res) => {

                        if (res.success == true) {
                            let data = res.data.tableDate;

                            this.drawDl2Line(data.xAxisData, data.yAxisData);
                        }
                    });
            },
            // 获取全年消费总量--石油数据
            getsyXfData() {
                var formData = new FormData();
                formData.append("typeId", this.value5)
                this.$axios
                    .post("mengenergy-background/energyRunning/oilConsume", formData)
                    .then((res) => {

                        if (res.success == true) {
                            let data = res.data.tableDate;

                            this.drawSy2Zhu(data.xAxisData, data.yAxisData);
                        }
                    });
            },
            // 获取全年消费总量--天然气数据
            gettrqXfData() {
                var formData = new FormData();
                formData.append("typeId", this.value5)
                this.$axios
                    .post("mengenergy-background/energyRunning/gasConsume", formData)
                    .then((res) => {
                        if (res.success == true) {
                            let data = res.data.tableDate;

                            this.drawTrq2Line(data.xAxisData, data.yAxisData);
                        }
                    });
            },


            // 一次能源生产饼图
            drawPlan() {
                // 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
                var chart1 = this.$echarts.init(document.getElementById("chart1"));
                // 圆环图各环节的颜色
                var color = ["#03B5EF", "#17DBE9", "#19C8FF", "#F67476", "#18D3F2", "#FFF25E"];
                // 圆环图各环节的名称和值(系列中各数据项的名称和值)

                // 指定图表的配置项和数据
                var option = {
                    // 图例
                    legend: [
                        {
                            selectedMode: true, // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
                            bottom: "5%",
                            left: "center",
                            itemWidth: 8,
                            itemHeight: 8,
                            textStyle: {
                                // 图例的公用文本样式。
                                fontSize: 12,
                                color: "#909AB2",
                            },
                            data: ["原煤", "风能", "光能", "原油", "其它非石化能源", "天然气"],
                        },
                    ],
                    tooltip: {
                        confine: true,
                        trigger: "item",
                        formatter: "{b}: <br/>{c}万吨标煤 ({d}%)"

                    },

                    // 系列列表
                    series: [
                        {
                            name: "一次能源生产概况", // 系列名称
                            type: "pie", // 系列类型
                            // roseType: "radius",
                            center: ["50%", "30%"], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
                            radius: ["30%", "45%"], // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
                            hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
                            color: color, // 圆环图的颜色
                            data: this.type, // 系列中的数据内容数组。
                            label: {
                                // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
                                normal: {
                                    show: true, // 是否显示标签[ default: false ]
                                    position: "auto", // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
                                    // formatter: "{c}万吨标煤", // 标签内容
                                    formatter: function (params) {
                                        // console.log(data,'-------------data',  data.percent)
                                        return (
                                            params.percent.toFixed(2) +
                                            "%" +
                                            "\n" +
                                            params.value.toFixed(2) +
                                            "万吨标煤"
                                        );
                                    },
                                    textStyle: {
                                        fontSize: 8,
                                    },
                                },
                            },
                            labelLine: {
                                // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
                                normal: {
                                    show: true, // 是否显示视觉引导线。
                                    length: 6, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
                                    length2: 6, // 视觉引导项第二段的长度。
                                    lineStyle: {
                                        // 视觉引导线的样式
                                        //color: '#000',
                                        //width: 1
                                    },
                                    textStyle: {
                                        color: "#000",
                                    },
                                },
                            },

                        },
                    ],
                };

                // 使用刚指定的配置项和数据显示图表
                chart1.setOption(option);
            },

            // 能源消费折线图
            drawLine() {

                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById("chartLine"));
                var xData = [
                    "1",
                    "2",
                    "3",
                    "4",
                    "5",
                    "6",
                    "7",
                    "8",
                    "9",
                    "10",
                    "11",
                    "12",
                ];
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '人均能源消费量',
                        left: '8%',
                        textStyle: {
                            fontSize: 12,
                            color: '#000',
                            fontWeight: 400,


                        }
                    },
                    color: ["#FBB05E", "#FF0000"],
                    legend: {
                        icon: "rect",
                        top: '16%',
                        left: '40%',
                        itemWidth: 12,
                        itemHeight: 5,
                        show: true,
                        data: ["全区", "全国"],
                        textStyle: {
                            color: "#9C9EA2",
                            fontSize: 10,
                        }
                    },
                    grid: {
                        //图表的位置

                        left: "10%",
                        right: "3%",
                        bottom: "2%",
                        containLabel: true,
                    },
                    xAxis: {
                        type: "category",
                        data: xData,
                        axisLabel: {
                            interval: 0,
                            show: true,
                            textStyle: {
                                color: "#9C9EA2",
                                fontSize: 10,
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#9C9EA2",
                            },
                        },
                    },
                    yAxis: {
                        name: "吨标煤",
                        type: "value",
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#9C9EA2",
                                fontSize: 8,
                            },
                        },
                        nameTextStyle: {
                            fontSize: 10,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#9C9EA2",
                            },
                        },
                    },
                    series: [
                        {
                            name: "全区",
                            symbol: "none",
                            type: "line",
                            smooth: true,
                            data: this.allArea,
                            itemStyle: {
                                normal: {
                                    color: "#FBAF5D",
                                    borderColor: "#fff",
                                    borderWidth: 0.5,
                                    borderType: "solid",
                                    shadowColor: "#fff",
                                    shadowBlur: 4,
                                },
                            },
                            lineStyle: {
                                normal: {
                                    width: 2,
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 0, //从左到右
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "rgb(255,224,4,1)", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(255,142,31,1)", // 100% 处的颜色
                                            },
                                        ],
                                        globalCoord: false, // 缺省为 false
                                    },
                                },
                            },
                            areaStyle: {
                                //折线颜色不取渐变色，取color设置值
                                normal: {
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 0, //从左到右，但不能从上到下，需要借助辅助系列
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "rgb(255,224,4,.3)", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(255,142,31,.1)", // 100% 处的颜色
                                            },
                                        ],
                                        globalCoord: false, // 缺省为 false
                                    },
                                },
                            },
                        },
                        {
                            name: "全国",
                            type: "line",
                            data: this.allCountry,
                            symbol: "none",
                            smooth: false,
                            lineStyle: {
                                color: "red",
                                type: "dotted",
                            },
                            itemStyle: {
                                normal: {
                                    color: "red",
                                    borderColor: "#fff",
                                    borderWidth: 0.5,
                                    borderType: "solid",
                                    shadowColor: "#fff",
                                    shadowBlur: 4,
                                },
                            },
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            },

            // 全年生产总量 --煤炭柱状
            drawZhu(xData, data) {
                //  console.log(data)
                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById("mtCharts"));

                var option = {
                    color: ["#3EA6FF"],
                    textStyle: {
                        color: "#ADBBD3",
                        fontSize: 14,
                    },
                    tooltip: {
                        confine: true,
                        formatter: '{b}月</br>{a}:{c}万吨标煤',
                        // formatter: "最高值:"+this.max+"</br>"+"最低值:"+this.min+"</br>"+"极差:"+this.poor,
                        trigger: "axis",
                        backgroundColor: 'rgba(0,0,0,0.5)',
                        axisPointer: {
                            type: "shadow",
                        },
                    },

                    grid: {
                        //图表的位置
                        top: "20%",
                        left: "5%",
                        right: "1%",
                        bottom: "1%",
                        containLabel: true,
                    },
                    yAxis: [
                        {
                            name: "万吨标煤",
                            // minInterval: 200,
                            // max: 800,
                            type: "value",
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                    width: 1,
                                    type: "solid",
                                },
                            },
                            nameTextStyle: {
                                fontSize: 10,
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                interval: 0,
                                fontSize: 14,
                            },
                            nameLocation: "end", //坐标位置，支持start,end，middle
                        },
                    ],
                    xAxis: [
                        {
                            show: true,
                            type: "category",
                            boundaryGap: true,
                            data: xData,
                            axisLine: {
                                lineStyle: {
                                    color: "#ADBBD3",
                                },
                            },
                            //刻度线是否显示
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                interval: 0,
                                fontSize: 14,
                                show: true,
                                // rotate:300
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    // 使用深浅的间隔色
                                    color: "#ADBBD3",
                                },
                            },
                        },
                    ],
                    series: [
                        {
                            name: "煤炭",
                            type: "bar",
                            barWidth: "10px",
                            stack: "总量",
                            // center:['50%','50%'],
                            data: data,
                        },
                    ],
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },

            // 全年生产总量--电力折线
            drawDlLine(xData, data) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById("dlCharts"));
                var option = {
                    color: ["#189EEC"],
                    textStyle: {
                        color: "#ADBBD3",
                        fontSize: 14,
                    },
                    tooltip: {
                        confine: true,
                        formatter: '{b}月</br>{a}:{c}亿千瓦时',
                        // formatter: "最高值:"+this.dlmax+"</br>"+"最低值:"+this.dlmin+"</br>"+"极差:"+this.dlpoor,
                        trigger: "axis",
                        backgroundColor: 'rgba(0,0,0,0.5)',

                    },

                    legend: {
                        show: false,
                        top: "10%",
                        orient: "vertical",
                    },
                    grid: {
                        //图表的位置
                        top: "20%",
                        left: "5%",
                        right: "1%",
                        bottom: "1%",
                        containLabel: true,
                    },
                    yAxis: [
                        {
                            name: "亿千瓦时",
                            // minInterval: 5000,
                            // max: 20000,
                            type: "value",
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                    width: 1,
                                    type: "solid",
                                },
                            },
                            nameTextStyle: {
                                fontSize: 10,
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                },
                            },
                            axisLabel: {
                                interval: 0,
                                fontSize: 14,
                            },
                            nameLocation: "end", //坐标位置，支持start,end，middle
                        },
                    ],
                    xAxis: [
                        {
                            type: "category",
                            data: xData,
                            // boundaryGap : false,
                            axisLabel: {},
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#535F71",
                                    width: 1,
                                },
                            },
                        },
                    ],
                    series: [
                        {
                            name: "电力",
                            symbol: "none",
                            type: "line",
                            data: data,
                            itemStyle: {
                                normal: {
                                    color: "#189EEC",
                                    borderColor: "#fff",
                                    borderWidth: 1,
                                    borderType: "solid",
                                    shadowColor: "#fff",
                                    shadowBlur: 4,
                                },
                            },
                            lineStyle: {
                                normal: {
                                    width: 2,
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 0, //从左到右
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "rgb(30,144,255,1)", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(30,144,255,1)", // 100% 处的颜色
                                            },
                                        ],
                                        globalCoord: false, // 缺省为 false
                                    },
                                },
                            },
                            areaStyle: {
                                //折线颜色不取渐变色，取color设置值
                                normal: {
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 0, //从左到右，但不能从上到下，需要借助辅助系列
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "rgb(30,144,255,.3)", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(30,144,255,.01)", // 100% 处的颜色
                                            },
                                        ],
                                        globalCoord: false, // 缺省为 false
                                    },
                                },
                            },
                        },
                    ],
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },

            // 全年生产总量--石油柱状
            drawSyZhu(xData, data) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById("syCharts"));


                var option = {
                    color: ["#90DEFC"],
                    textStyle: {
                        color: "#ADBBD3",
                        fontSize: 14,
                    },
                    tooltip: {
                        confine: true,
                        formatter: '{b}月</br>{a}:{c}万吨标煤',
                        // formatter: "最高值:"+this.symax+"</br>"+"最低值:"+this.symin+"</br>"+"极差:"+this.sypoor,
                        trigger: "axis",
                        backgroundColor: 'rgba(0,0,0,0.5)',
                        axisPointer: {
                            type: "shadow",
                        },
                    },

                    grid: {
                        //图表的位置
                        top: "20%",
                        left: "5%",
                        right: "1%",
                        bottom: "1%",
                        containLabel: true,
                    },
                    yAxis: [
                        {
                            name: "万吨标煤",

                            type: "value",
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                    width: 1,
                                    type: "solid",
                                },
                            },
                            nameTextStyle: {
                                fontSize: 10,
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                },
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                interval: 0,
                                fontSize: 14,
                            },
                            nameLocation: "end", //坐标位置，支持start,end，middle
                        },
                    ],
                    xAxis: [
                        {
                            show: true,
                            type: "category",
                            boundaryGap: true,
                            data: xData,
                            axisLine: {
                                lineStyle: {
                                    color: "#ADBBD3",
                                },
                            },
                            //刻度线是否显示
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                interval: 0,
                                fontSize: 14,
                                show: true,
                                // rotate:300
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    // 使用深浅的间隔色
                                    color: "#ADBBD3",
                                },
                            },
                        },
                    ],
                    series: [
                        {
                            name: "石油",
                            type: "bar",
                            barWidth: "10px",
                            stack: "总量",
                            // center:['50%','50%'],
                            data: data,
                        },
                    ],
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },

            // 全年生产总量--天然气折线
            drawTrqLine(xData, data) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById("tryCharts"));

                var option = {
                    color: ["#1CC2EC"],
                    textStyle: {
                        color: "#ADBBD3",
                        fontSize: 14,
                    },

                    tooltip: {
                        confine: true,
                        formatter: '{b}月</br>{a}:{c}万吨标煤',
                        // formatter: "最高值:"+this.trqmax+"</br>"+"最低值:"+this.trqmin+"</br>"+"极差:"+this.trqpoor,
                        trigger: "axis",
                        backgroundColor: 'rgba(0,0,0,0.5)',

                    },

                    legend: {
                        show: false,
                        top: "10%",
                        orient: "vertical",
                    },
                    grid: {
                        //图表的位置
                        top: "20%",
                        left: "5%",
                        right: "1%",
                        bottom: "1%",
                        containLabel: true,
                    },
                    yAxis: [
                        {
                            name: "万吨标煤",

                            type: "value",
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                    width: 1,
                                    type: "solid",
                                },
                            },
                            nameTextStyle: {
                                fontSize: 10,
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                },
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                interval: 0,
                                fontSize: 14,
                            },
                            nameLocation: "end", //坐标位置，支持start,end，middle
                        },
                    ],
                    xAxis: [
                        {
                            type: "category",
                            data: xData,
                            // boundaryGap : false,
                            axisLabel: {},
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#535F71",
                                    width: 1,
                                },
                            },
                        },
                    ],
                    series: [
                        {
                            symbol: "none",
                            name: "天然气",
                            type: "line",
                            smooth: true,
                            data: data,
                            itemStyle: {
                                normal: {
                                    color: "#189EEC",
                                    borderColor: "#fff",
                                    borderWidth: 1,
                                    borderType: "solid",
                                    shadowColor: "#fff",
                                    shadowBlur: 4,
                                },
                            },
                            lineStyle: {
                                normal: {
                                    width: 2,
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 0, //从左到右
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "rgb(0,191,255,1)", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(0,191,255,1)", // 100% 处的颜色
                                            },
                                        ],
                                        globalCoord: false, // 缺省为 false
                                    },
                                },
                            },
                            areaStyle: {
                                //折线颜色不取渐变色，取color设置值
                                normal: {
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 0, //从左到右，但不能从上到下，需要借助辅助系列
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "rgb(0,191,255,.2)", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(0,191,255,.01)", // 100% 处的颜色
                                            },
                                        ],
                                        globalCoord: false, // 缺省为 false
                                    },
                                },
                            },
                        },
                    ],
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },


            // 全年消费总量--煤炭2柱状
            drawMt2Zhu(xData, data) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById("mt2Charts"));

                var option = {
                    color: ["#3EA6FF"],
                    textStyle: {
                        color: "#ADBBD3",
                        fontSize: 14,
                    },
                    tooltip: {
                        confine: true,
                        formatter: '{b}月</br>{a}:{c}万吨标煤',
                        // formatter: "最高值:"+this.maxConsumeNum+"</br>"+"最低值:"+this.minConsumeNum+"</br>"+"极差:"+this.differenceValue,
                        trigger: "axis",
                        backgroundColor: 'rgba(0,0,0,0.5)',
                        axisPointer: {
                            type: "shadow",
                        },
                    },

                    grid: {
                        //图表的位置
                        top: "20%",
                        left: "5%",
                        right: "1%",
                        bottom: "1%",
                        containLabel: true,
                    },
                    yAxis: [
                        {
                            name: "万吨标煤",

                            type: "value",
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                    width: 1,
                                    type: "solid",
                                },
                            },
                            nameTextStyle: {
                                fontSize: 10,
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                interval: 0,
                                fontSize: 14,
                            },
                            nameLocation: "end", //坐标位置，支持start,end，middle
                        },
                    ],
                    xAxis: [
                        {
                            show: true,
                            type: "category",
                            boundaryGap: true,
                            data: xData,
                            axisLine: {
                                lineStyle: {
                                    color: "#ADBBD3",
                                },
                            },
                            //刻度线是否显示
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                interval: 0,
                                fontSize: 14,
                                show: true,
                                // rotate:300
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    // 使用深浅的间隔色
                                    color: "#ADBBD3",
                                },
                            },
                        },
                    ],
                    series: [
                        {
                            name: "煤炭",
                            type: "bar",
                            barWidth: "10px",
                            stack: "总量",
                            // center:['50%','50%'],
                            data: data,
                        },
                    ],
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },

            // 全年消费总量--电力2折线
            drawDl2Line(xData, data) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById("dl2Charts"));

                var option = {
                    color: ["#189EEC"],
                    textStyle: {
                        color: "#ADBBD3",
                        fontSize: 14,
                    },
                    tooltip: {
                        confine: true,
                        formatter: '{b}月</br>{a}:{c}亿千瓦时',
                        // formatter: "最高值:"+this.maxConsumeNumDl+"</br>"+"最低值:"+this.minConsumeNumDl+"</br>"+"极差:"+ this.differenceValueDl,
                        trigger: "axis",
                        backgroundColor: 'rgba(0,0,0,0.5)',
                        //   axisPointer: {
                        //     type: "line",
                        //     label: {
                        //       backgroundColor: "#6a7985",
                        //     },
                        //   },
                    },

                    legend: {
                        show: false,
                        top: "10%",
                        orient: "vertical",
                    },
                    grid: {
                        //图表的位置
                        top: "20%",
                        left: "5%",
                        right: "1%",
                        bottom: "1%",
                        containLabel: true,
                    },
                    yAxis: [
                        {
                            name: "亿千瓦时",

                            type: "value",
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                    width: 1,
                                    type: "solid",
                                },
                            },
                            nameTextStyle: {
                                fontSize: 10,
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                interval: 0,
                                fontSize: 14,
                            },
                            nameLocation: "end", //坐标位置，支持start,end，middle
                        },
                    ],
                    xAxis: [
                        {
                            type: "category",
                            data: xData,
                            // boundaryGap : false,
                            axisLabel: {},
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#535F71",
                                    width: 1,
                                },
                            },
                        },
                    ],
                    series: [
                        {
                            symbol: "none",
                            name: '电力',
                            type: "line",
                            data: data,
                            itemStyle: {
                                normal: {
                                    color: "#189EEC",
                                    borderColor: "#fff",
                                    borderWidth: 1,
                                    borderType: "solid",
                                    shadowColor: "#fff",
                                    shadowBlur: 4,
                                },
                            },
                            lineStyle: {
                                normal: {
                                    width: 2,
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 0, //从左到右
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "rgb(30,144,255,1)", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(30,144,255,1)", // 100% 处的颜色
                                            },
                                        ],
                                        globalCoord: false, // 缺省为 false
                                    },
                                },
                            },
                            areaStyle: {
                                //折线颜色不取渐变色，取color设置值
                                normal: {
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 0, //从左到右，但不能从上到下，需要借助辅助系列
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "rgb(30,144,255,.3)", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(30,144,255,.01)", // 100% 处的颜色
                                            },
                                        ],
                                        globalCoord: false, // 缺省为 false
                                    },
                                },
                            },
                        },
                    ],
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },

            // 全年消费总量--石油2柱状
            drawSy2Zhu(xData, data) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById("sy2Charts"));

                var option = {
                    color: ["#90DEFC"],
                    textStyle: {
                        color: "#ADBBD3",
                        fontSize: 14,
                    },
                    tooltip: {
                        confine: true,
                        formatter: '{b}月</br>{a}:{c}万吨标煤',
                        // formatter: "最高值:"+this.maxConsumeNumOil+"</br>"+"最低值:"+this.minConsumeNumOil+"</br>"+"极差:"+this.differenceValueOil,
                        trigger: "axis",
                        backgroundColor: 'rgba(0,0,0,0.5)',
                        axisPointer: {
                            type: "shadow",
                        },
                    },

                    grid: {
                        //图表的位置
                        top: "20%",
                        left: "5%",
                        right: "1%",
                        bottom: "1%",
                        containLabel: true,
                    },
                    yAxis: [
                        {
                            name: "万吨标煤",

                            type: "value",
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                    width: 1,
                                    type: "solid",
                                },
                            },
                            nameTextStyle: {
                                fontSize: 10,
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                interval: 0,
                                fontSize: 14,
                            },
                            nameLocation: "end", //坐标位置，支持start,end，middle
                        },
                    ],
                    xAxis: [
                        {
                            show: true,
                            type: "category",
                            boundaryGap: true,
                            data: xData,
                            axisLine: {
                                lineStyle: {
                                    color: "#ADBBD3",
                                },
                            },
                            //刻度线是否显示
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                interval: 0,
                                fontSize: 14,
                                show: true,
                                // rotate:300
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    // 使用深浅的间隔色
                                    color: "#ADBBD3",
                                },
                            },
                        },
                    ],
                    series: [
                        {
                            name: "石油",
                            type: "bar",
                            barWidth: "10px",
                            stack: "总量",
                            // center:['50%','50%'],
                            data: data,
                        },
                    ],
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },

            // 全年消费总量--天然气2折线
            drawTrq2Line(xData, data) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById("try2Charts"));

                var option = {
                    color: ["#1CC2EC"],
                    textStyle: {
                        color: "#ADBBD3",
                        fontSize: 14,
                    },
                    tooltip: {
                        confine: true,
                        formatter: '{b}月</br>{a}:{c}万吨标煤',
                        // formatter: "最高值:"+this.maxConsumeNumGas+"</br>"+"最低值:"+this.minConsumeNumGas+"</br>"+"极差:"+this.differenceValueGas,
                        trigger: "axis",
                        backgroundColor: 'rgba(0,0,0,0.5)',
                        //   axisPointer: {
                        //     type: "line",
                        //     label: {
                        //       backgroundColor: "#6a7985",
                        //     },
                        //   },
                    },

                    legend: {
                        show: false,
                        top: "10%",
                        orient: "vertical",
                    },
                    grid: {
                        //图表的位置
                        top: "20%",
                        left: "5%",
                        right: "1%",
                        bottom: "1%",
                        containLabel: true,
                    },
                    yAxis: [
                        {
                            name: "万吨标煤",

                            type: "value",
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                    width: 1,
                                    type: "solid",
                                },
                            },
                            nameTextStyle: {
                                fontSize: 10,
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                },
                            },
                            axisLabel: {
                                interval: 0,
                                fontSize: 14,
                            },
                            nameLocation: "end", //坐标位置，支持start,end，middle
                        },
                    ],
                    xAxis: [
                        {
                            type: "category",
                            data: xData,
                            // boundaryGap : false,
                            axisLabel: {},
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#535F71",
                                    width: 1,
                                },
                            },
                        },
                    ],
                    series: [
                        {
                            symbol: "none",
                            name: '天然气',
                            type: "line",
                            smooth: true,
                            data: data,
                            itemStyle: {
                                normal: {
                                    color: "#189EEC",
                                    borderColor: "#fff",
                                    borderWidth: 1,
                                    borderType: "solid",
                                    shadowColor: "#fff",
                                    shadowBlur: 4,
                                },
                            },
                            lineStyle: {
                                normal: {
                                    width: 2,
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 0, //从左到右
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "rgb(0,191,255,1)", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(0,191,255,1)", // 100% 处的颜色
                                            },
                                        ],
                                        globalCoord: false, // 缺省为 false
                                    },
                                },
                            },
                            areaStyle: {
                                //折线颜色不取渐变色，取color设置值
                                normal: {
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 0, //从左到右，但不能从上到下，需要借助辅助系列
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "rgb(0,191,255,.2)", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(0,191,255,.01)", // 100% 处的颜色
                                            },
                                        ],
                                        globalCoord: false, // 缺省为 false
                                    },
                                },
                            },
                        },
                    ],
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },

            // 运输环形图
            drawHx() {
                // 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
                var chart1 = this.$echarts.init(document.getElementById("hxCharts"));


                var option = {
                    color: ["#93DFFC", "#6C65FB", "#FF60A2", "#BF64FF"],

                    title: {
                        text: "年度运输总量",
                        y: 70,
                        x: 50,
                        textStyle: {
                            color: "#96A0BB",
                            fontSize: 13,
                        },
                    },
                    tooltip: {
                        confine: true,
                        trigger: "item",
                        formatter: "{b}",
                        textStyle: {
                            width: 420,
                            height: 327,
                            fontSize: "12",
                            // fontWeight: "bold",
                            // lineHeight:'180px'
                        },
                    },
                    legend: {
                        orient: "vertical",
                        left: '55%',
                        icon: "circle",
                        top: "10%",
                        textStyle: {
                            color: "#8F99B2",
                            fontSize: 12,
                        },
                        itemGap: 15,
                        itemWidth: 8,
                        itemHeight: 8,
                        formatter: function (params) {
                            // return 'qwe' + '\n' + params
                            let tip1 = "";
                            let tip = "";
                            let len = params.length;
                            //每行最多显示多少个字
                            let rowMax = 30;
                            if (len >= rowMax) {
                                //共有多少行
                                let rowNum = Math.ceil(len / rowMax);
                                for (let i = 1; i <= rowNum; i++) {
                                    //循环
                                    if (i < rowNum) {
                                        //最后一段字符不能有\n
                                        tip1 += params.slice((i - 1) * rowMax, i * rowMax) + "\n"; //字符串拼接
                                    } else if (i == rowNum) {
                                        //最后一段字符不一定够rowMax个
                                        console.log(tip1)
                                        tip = tip1 + params.slice((rowNum - 1) * rowMax, len); //最后的拼接在最后
                                    }
                                }
                                return tip;
                            } else {
                                return params;
                            }
                        },
                    },
                    series: [
                        {
                            name: "异常时长",
                            type: "pie",
                            radius: ["60%", "50%"],
                            center: ["25%", "50%"],
                            label: {
                                normal: {
                                    show: false,
                                    position: "center",
                                    // formatter: function () {
                                    //   return "\n";
                                    // },
                                    textStyle: {
                                        color: "#000",
                                        fontSize: "22",
                                        fontWeight: 600,
                                    },
                                },
                            },
                            labelLine: {
                                normal: {
                                    show: false,
                                },
                            },
                            data: this.transData,
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表
                chart1.setOption(option);
            },

            // 用电环形图
            drawHx1() {
                // 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById("hxCharts1"));

                // 圆环图各环节的名称和值(系列中各数据项的名称和值)
                var option = {
                    color: ["#EF6C54", "#FF9411", "#69E6EC", "#17DEA2"],
                    title: {
                        text: this.electricityTrading,
                        y: 80,
                        x: 63,
                        textStyle: {
                            color: "#000",
                            fontSize: 17,
                        },
                    },
                    tooltip: {
                        confine: true,
                        trigger: "item",
                        formatter: "{b}",
                        textStyle: {
                            width: 420,
                            height: 327,
                            fontSize: "12",
                            fontWeight: "bold",
                            //lineHeight:'180px'
                        },
                    },
                    legend: {
                        orient: "vertical",
                        left: '55%',
                        icon: "circle",
                        top: "19%",
                        textStyle: {
                            color: "#8F99B2",
                            fontSize: 12,
                        },
                        itemGap: 15,
                        itemWidth: 8,
                        itemHeight: 8,
                        formatter: function (params) {
                            // return 'qwe' + '\n' + params
                            let tip1 = "";
                            let tip = "";
                            let len = params.length;
                            //每行最多显示多少个字
                            let rowMax = 30;
                            if (len >= rowMax) {
                                //共有多少行
                                let rowNum = Math.ceil(len / rowMax);
                                for (let i = 1; i <= rowNum; i++) {
                                    //循环
                                    if (i < rowNum) {
                                        //最后一段字符不能有\n
                                        tip1 += params.slice((i - 1) * rowMax, i * rowMax) + "\n"; //字符串拼接
                                    } else if (i == rowNum) {
                                        //最后一段字符不一定够rowMax个
                                        tip = tip1 + params.slice((rowNum - 1) * rowMax, len); //最后的拼接在最后
                                    }
                                }
                                return tip;
                            } else {
                                return params;
                            }
                        },
                    },
                    series: [
                        {
                            name: "用电交易量",
                            type: "pie",
                            radius: ["49%", "70%"],
                            center: ["28%", "50%"],
                            label: {
                                normal: {
                                    show: true,
                                    position: "center",
                                    formatter: function () {
                                        return "\n万千瓦时";
                                    },
                                    textStyle: {
                                        color: "#4D607C",
                                        fontSize: "12",
                                    },
                                },
                            },
                            labelLine: {
                                normal: {
                                    show: false,
                                },
                            },
                            data: this.electricData
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表
                myChart.setOption(option);
            },

            // 能源调入调出量柱图
            drawDrdcZhu(xData, data1, data2) {

                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById("drdcCharts1"));

                var option = {
                    color: ["#90DEFC", "#1DABE3", "#418BFF", "#1B66F9"],
                    textStyle: {
                        color: "#ADBBD3",
                        fontSize: 14,
                    },
                    legend: {
                        right: 100,
                        itemWidth: 8,
                        itemHeight: 8,
                        top: "5%",
                        left: "40%",
                        textStyle: {
                            fontSize: 12,
                            color: "#8F99B2",
                        },
                        data: ["调入", "调出"],
                    },
                    tooltip: {
                        confine: true,
                        formatter: '{b0}</br>{a0}:{c0}亿吨标煤</br>{a1}:{c1}亿吨标煤',
                        trigger: "axis",
                        textStyle: {
                            width: 420,
                            height: 327,
                            fontSize: "12",
                            fontWeight: "bold",
                            //lineHeight:'180px'
                        },
                        axisPointer: {
                            type: 'shadow',
                        }
                    },
                    grid: {
                        //图表的位置
                        top: "25%",
                        left: "5%",
                        right: "5%",
                        bottom: "10%",
                        containLabel: true,
                    },
                    yAxis: [
                        {
                            name: "亿吨标煤",
                            // minInterval: -2,

                            type: "value",
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                    width: 1,
                                    type: "solid",
                                },
                            },
                            nameTextStyle: {
                                fontSize: 10,
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                interval: 0,
                                fontSize: 14,
                            },
                            nameLocation: "end", //坐标位置，支持start,end，middle
                        },
                    ],
                    xAxis: [
                        {
                            show: true,
                            type: "category",
                            boundaryGap: true,
                            data: xData,
                            axisLine: {
                                lineStyle: {
                                    color: "#ADBBD3",
                                },
                            },
                            //刻度线是否显示
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                interval: 0,
                                fontSize: 14,
                                show: true,
                                // rotate:300
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    // 使用深浅的间隔色
                                    color: "#ADBBD3",
                                },
                            },
                        },
                    ],
                    series: [
                        {
                            name: "调入",
                            type: "bar",
                            barWidth: "10px",
                            data: data1,
                        },
                        {
                            name: "调出",
                            type: "bar",
                            barWidth: "10px",
                            data: data2,
                        },

                    ],
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },

            // 能源价格折线图
            drawNypriceLine(xData, data) {
                // 获取图例名称
                var name = this.legendName;

                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(
                    document.getElementById("nyPriceCharts1")
                );


                var option = {
                    color: ["#1CC2EC"],
                    textStyle: {
                        color: "#ADBBD3",
                        fontSize: 14,
                    },
                    tooltip: {
                        confine: true,
                        trigger: "axis",
                        axisPointer: {
                            type: "line",
                            label: {
                                backgroundColor: "rgba(0,0,0,0.5)",
                            },
                        },
                    },
                    legend: {
                        show: true,
                        top: "10%",
                        orient: "vertical",
                        itemWidth: 12,
                        itemHeight: 5,
                        icon: "rect",
                        left: "69%",
                        textStyle: {
                            fontSize: 11,
                            color: "#8F99B2",
                        },
                        data: name,
                    },
                    grid: {
                        //图表的位置
                        top: "20%",
                        left: "5%",
                        right: "5%",
                        bottom: "10%",
                        containLabel: true,
                    },
                    yAxis: [
                        {
                            name: "元/吨",
                            minInterval: 200,
                            max: 800,
                            type: "value",
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                    width: 1,
                                    type: "solid",
                                },
                            },
                            nameTextStyle: {
                                fontSize: 10,
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                },
                            },
                            axisLabel: {
                                interval: 0,
                                fontSize: 14,
                            },
                            nameLocation: "end", //坐标位置，支持start,end，middle
                        },
                    ],
                    xAxis: [
                        {
                            type: "category",
                            data: xData,
                            // boundaryGap : false,
                            axisLabel: {},
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#ADBBD3",
                                    width: 1,
                                },
                            },
                        },
                    ],
                    series: [
                        {
                            name: name,
                            symbol: "none",
                            type: "line",
                            smooth: true,
                            data: data,
                            itemStyle: {
                                normal: {
                                    color: "#189EEC",
                                    borderColor: "#fff",
                                    borderWidth: 1,
                                    borderType: "solid",
                                    shadowColor: "#fff",
                                    shadowBlur: 4,
                                },
                            },
                            lineStyle: {
                                normal: {
                                    width: 2,
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 0, //从左到右
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "rgb(0,191,255,1)", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(0,191,255,1)", // 100% 处的颜色
                                            },
                                        ],
                                        globalCoord: false, // 缺省为 false
                                    },
                                },
                            },
                            areaStyle: {
                                //折线颜色不取渐变色，取color设置值
                                normal: {
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 0, //从左到右，但不能从上到下，需要借助辅助系列
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "rgb(0,191,255,.2)", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(0,191,255,.01)", // 100% 处的颜色
                                            },
                                        ],
                                        globalCoord: false, // 缺省为 false
                                    },
                                },
                            },
                        },
                    ],
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },

            // 能源保供完成量柱图
            drawNybgZhu(xData, data1, data2) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById("nybgCharts1"));


                var option = {
                    color: ["#DBDEE4", "#1B66F9"],
                    textStyle: {
                        color: "#6a7985",
                        fontSize: 14,
                    },
                    legend: {
                        orient: "horizontal",
                        itemWidth: 8,
                        itemHeight: 8,
                        left: "50%",
                        top: "5%",
                        textStyle: {
                            fontSize: 12,
                            color: "#8F99B2",
                        },
                        data: ["保供完成值", "保供目标值"],
                    },
                    tooltip: {
                        confine: true,
                        trigger: "axis",
                        backgroundColor: 'rgba(0,0,0,0.5)',
                        axisPointer: {
                            type: "line",
                        },
                    },

                    grid: {
                        //图表的位置
                        top: "20%",
                        left: "5%",
                        right: "5%",
                        bottom: "10%",
                        containLabel: true,
                    },
                    yAxis: [
                        {
                            name: "万立方米",
                            min: 0.4,
                            max: 2.0,
                            type: "value",
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                    width: 1,
                                    type: "solid",
                                },
                            },
                            nameTextStyle: {
                                fontSize: 10,
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ADBBD3",
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                interval: 0,
                                fontSize: 14,
                            },
                            nameLocation: "end", //坐标位置，支持start,end，middle
                        },
                    ],
                    xAxis: [
                        {
                            show: true,
                            type: "category",
                            boundaryGap: true,
                            data: xData,
                            axisLine: {
                                lineStyle: {
                                    color: "#ADBBD3",
                                },
                            },
                            //刻度线是否显示
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                interval: 0,
                                fontSize: 14,
                                show: true,
                                // rotate:300
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    // 使用深浅的间隔色
                                    color: "#ADBBD3",
                                },
                            },
                        },
                    ],
                    series: [
                        {
                            name: "保供完成值",
                            type: "bar",
                            barWidth: "10px",
                            data: data1,
                            itemStyle: {
                                //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                                emphasis: {
                                    barBorderRadius: 30,
                                },
                                normal: {
                                    //柱形图圆角，初始化效果
                                    barBorderRadius: [10, 10, 10, 10],
                                    color: new this.$echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 0,
                                                color: "#1268f3", // 0% 处的颜色
                                            },
                                            {
                                                offset: 0.6,
                                                color: "#08a4fa", // 60% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "#01ccfe", // 100% 处的颜色
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                        },
                        {
                            name: "保供目标值",
                            type: "bar",
                            barWidth: "10px",
                            data: data2,
                            itemStyle: {
                                //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                                emphasis: {
                                    barBorderRadius: 30,
                                },

                                normal: {
                                    //柱形图圆角，初始化效果
                                    barBorderRadius: [10, 10, 10, 10],
                                },
                            },
                        },
                    ],
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },

            box5Click(name) {
                this.box5Name = name;
                if (name == 2) {
                    this.$nextTick(function () {
                        this.getEnergyFinishData();
                    });
                } else if (name == 1) {
                    this.$nextTick(function () {
                        this.getEnergyPriceData()
                    });
                }
            },
            box4Click(name) {
                if (name == 2) {
                    this.$nextTick(function () {
                        this.getTransferInAndOutData();

                    });
                } else if (name == 3) {
                    this.$nextTick(function () {
                        this.getYdjylData();

                    });
                } else if (name == 1) {
                    this.$nextTick(function () {
                        this.getTypeOfShippingData();

                    });
                }
            },
            box3Click(name) {
                this.box3Name = name;
                if (name == 2) {
                    this.$nextTick(function () {

                        this.getdlXfData();
                    });
                } else if (name == 3) {
                    this.$nextTick(function () {

                        this.getsyXfData();
                    });
                } else if (name == 4) {
                    this.$nextTick(function () {

                        this.gettrqXfData();
                    });
                } else if (name == 1) {
                    this.$nextTick(function () {

                        this.getmtXfData();
                    });
                }
            },
            box2Click(name) {
                this.box2Name = name;
                if (name == 2) {
                    this.$nextTick(function () {
                        this.getdlScData();

                    });
                } else if (name == 3) {

                    this.$nextTick(function () {
                        this.getsyScData()
                    })
                } else if (name == 4) {

                    this.$nextTick(function () {

                        this.gettrqScData()
                    })

                } else if (name == 1) {

                    this.$nextTick(function () {

                        this.getmtScData()
                    })

                }
            },
            onClick(name) {
                this.box1Name = name;
                if (name == 2) {

                    this.$nextTick(function () {

                        this.getXfData();
                    })

                } else if (name == 1) {

                    this.$nextTick(function () {

                        this.getScData();
                    })

                }
            },
        },


    };
</script>
<style lang="scss" scoped>
    #Operation-Energy {
        background: hsl(0, 0%, 86%);

        .map {
            height: 5.2rem;
            text-align: center;
            background: #fff;

            .dqny {
                width: 2.4rem;
                height: 0.9rem;
                background: #201c1c2e;
                position: absolute;
                top: 2.5rem;
                left: 0.3rem;
                font-size: 0.1rem;
                color: #72747f;

                .xfl {
                    width: 0.25rem;
                    height: 0.1rem;
                    background: #4672ff;
                    margin-left: 0.1rem;
                    margin-right: 0.1rem;
                    margin-top: 0.08rem;
                }

                .scl {
                    width: 0.25rem;
                    height: 0.1rem;
                    background: #24bab2;
                    margin-left: 0.1rem;
                    margin-right: 0.1rem;
                    margin-top: 0.08rem;
                }
            }
        }

        .box1 {
            margin-top: 0.2rem;
            height: 5.15rem;

            background: #fff;
            position: relative;
            font-size: 0.3rem;

            .tabs {
                padding-top: 0.2rem;

                .gkbox {
                    display: flex;
                    margin-left: 0.3rem;
                    padding: 0.2rem 0;

                    .scimg {
                        padding-right: 0.1rem;
                        vertical-align: middle;
                    }

                    .gk {
                        vertical-align: middle;
                        font-size: 0.3rem;;
                    }

                    .selected {
                        position: absolute;

                    }
                }

                .sczlbox {

                    padding: 0 0.3rem 0 0.3rem;
                    display: inline-flex;

                    .leftSczl {
                        flex: 1;
                        width: 2.8rem;
                        height: 3.3rem;
                        background: #f4f7fd;
                        margin-top: 0.15rem;
                        padding: 0 0.15rem;

                        div {
                            color: #636e74;
                            font-size: 0.25rem;
                            padding: 0.11rem 0;

                            .tb {
                                padding-left: 0.7rem;
                                padding-right: 0.2rem;
                                color: #7e88a1;
                                font-weight: 600;
                            }

                            .zstb {
                                padding: 0 0.24rem;
                                color: #7e88a1;
                                font-weight: 600;
                            }

                            .qgzb {
                                padding-left: 0.4rem;
                                color: #7e88a1;
                                font-weight: 600;
                            }

                            .qgpm {
                                padding-left: 0.7rem;
                                color: #7e88a1;
                                font-weight: 600;
                            }
                        }

                        .oneSczl {
                            padding: 0.2rem 0;
                        }

                        .ydbm {
                            margin-left: 0.25rem;
                        }

                        .total {
                            font-size: 0.5rem;;
                            color: #000;
                        }
                    }

                }

                .xfgkbox {
                    display: flex;
                    padding: 0.2rem 0.3rem;

                    .leftXf {
                        width: 3.3rem;
                        height: 3.2rem;
                        background: #f4f7fd;
                        color: #646e74;
                        font-size: 0.25rem;
                        padding-left: 0.1rem;

                        .title {
                            color: #646e74;
                            padding-top: 0.23rem;
                            font-size: 0.25rem;

                            span:nth-child(1) {
                                padding-left: 0.1rem;
                                padding-right: 0.1rem;
                            }

                            span:nth-child(3) {
                                font-weight: 600;
                            }
                        }

                        .total1 {
                            padding-top: 0.15rem;
                            padding-bottom: 0.05rem;

                            span:nth-child(1) {
                                font-size: 0.5rem;
                                color: #3d4246;
                                padding-left: 0.7rem;
                                padding-right: 0.2rem;
                            }

                            span:nth-child(2) {
                                color: #2c3751;
                                font-size: 0.25rem;
                            }
                        }

                        .tbzb1 {
                            padding: 0.13rem 0.1rem;
                            font-size: 0.25rem;

                            span:nth-child(1) {
                                // padding-right:0.1rem;
                            }

                            span:nth-child(3) {
                                font-weight: 600;
                                padding-left: 0.1rem;
                                padding-right: 0.1rem;
                                color: #7e88a2;
                            }

                            span:nth-child(4) {
                                // padding: 0 0.05rem;
                            }

                            span:nth-child(5) {
                                color: #7e88a2;
                                font-weight: 600;
                                padding-left: 0.1rem;
                            }
                        }

                        .xfxs {
                            padding: 0.13rem 0;

                            span {
                                padding: 0 0.1rem;
                                font-size: 0.25rem;
                            }
                        }

                        .xsVal {
                            color: #3d4246;
                            font-size: 0.5rem;
                            padding-left: 0.7rem;
                            padding-bottom: 0.13rem;
                        }

                        .tbpm {
                            padding: 0 0.1rem;

                            span:nth-child(1) {
                                padding-right: 0.1rem;
                                font-size: 0.25rem;
                            }

                            span:nth-child(3) {
                                padding-left: 0.1rem;
                                font-weight: 600;
                                font-size: 0.25rem;
                            }

                            span:nth-child(4) {
                                padding: 0 0.1rem;
                                font-size: 0.25rem;
                            }

                            span:nth-child(5) {
                                font-weight: 600;
                                font-size: 0.25rem;
                            }
                        }
                    }

                    .rightXf {
                        width: 3.6rem;
                        height: 3.2rem;
                    }
                }
            }
        }

        .box2 {
            margin-top: 0.2rem;
            height: 5.25rem;
            // border: 2px solid red;
            background: #fff;

            .qnsc {
                padding: 0.3rem;
            }
        }

        .box3 {
            margin-top: 0.2rem;
            height: 5.25rem;
            // border: 2px solid red;
            background: #fff;

            .qnxf {
                padding: 0.3rem;
            }
        }

        .box4 {
            margin-top: 0.2rem;
            height: 4.85rem;
            // border: 2px solid red;
            background: #fff;

            .nullbox {
                padding-top: 0.2rem;
            }

            .wdbm {
                color: #8f99b2;
                position: absolute;
                top: 3.08rem;
                left: 1.35rem;
                font-size: 12px;
            }

            .huanbi {
                position: absolute;
                top: 3rem;
                left: 1.6rem;
                font-size: 0.1rem;

                .hbval {
                    font-size: 15px;
                }
            }

            .totalNmu {
                position: absolute;
                top: 2.5rem;
                left: 1rem;
                font-size: 22px;
                font-weight: 550;
            }
        }

        .box5 {
            margin-top: 0.2rem;
            height: 4.82rem;
            // border: 2px solid red;
            background: #fff;

            .nullbox {
                padding-top: 0.2rem;
            }
        }
    }
</style>
<style>
    .tabs .van-tabs__nav--card .van-tab.van-tab--active {
        background-color: #246cd6;
        color: #fff;
    }

    .tabs .van-tabs__nav--card {
        border-color: #246cd6;
    }

    .tabs .van-tabs__nav--card .van-tab {
        color: #246cd6;
    }

    .tabs .van-tabs__nav--card .van-tab {
        border-right: 1px solid #246cd6;
    }

    .tabs .van-dropdown-menu__bar {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        height: 23px;
        width: 1.85rem;
        left: 5rem;
        border: 1px solid #b7bdc5;

        /* background-color: #fff; */
        /* box-shadow: 0 2px 12px rgba(100,101,102,.12); */
    }

    .box2 .van-dropdown-menu__bar {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        height: 23px;
        width: 1.85rem;
        border: 1px solid #b7bdc5;
        top: 0.2rem;
        left: 2.8rem;
    }

    .box3 .van-dropdown-menu__bar {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        height: 23px;
        width: 1.85rem;
        border: 1px solid #b7bdc5;
        top: 0.2rem;
        left: 2.8rem;
    }

    .tabs .van-dropdown-menu__title {
        color: #6e737b;
    }
    .box4 .tabs .van-dropdown-menu__bar {
        width: 1.85rem;
        top: 0.15rem;
        left: 0.3rem;
    }
    .box5 .tabs .van-dropdown-menu__bar {
        width: 1.85rem;
        top: 0.15rem;
        left: 0.3rem;
    }

    .box1 .tabs .van-tab:nth-child(2) {
        border: none;
    }

    .box2 .tabs .van-tab:nth-child(4) {
        border: none;
    }

    .box3 .tabs .van-tab:nth-child(4) {
        border: none;
    }

    .box4 .tabs .van-tab:nth-child(3) {
        border: none;
    }

    .box5 .tabs .van-tab:nth-child(2) {
        border: none;
    }
</style>
